<template>
  <div class="page-wapper">
    <!-- 日报汇总 -->
    <el-row :gutter="20" style="flex: 1; overflow: hidden">
      <el-col :span="5" style="height: 100%">
        <el-card
          shadow="hover"
          :body-style="{
            flex: 1,
            padding: 0,
            'box-sizing': 'border-box',
            overflow: 'hidden',
          }"
          style="height: 100%; display: flex; flex-direction: column"
        >
          <template #header>
            <div class="clearfix">
              <span>组织人员</span>
            </div>
          </template>
          <div class="person_list">
            <div class="person_content">
              <div v-for="(item, i) in pageData" :key="i" class="cell_box">
                <div class="group_box">
                  <span v-for="(cell, j) in item.groupName.split('')" :key="j">
                    {{ cell }}
                  </span>
                </div>
                <div class="person_box">
                  <div
                    v-for="(cell, j) in item.userReportCommitList"
                    :key="j"
                    class="person_item"
                  >
                    <UserAvatar
                      :src="cell.avatar"
                      :showHuangguan="cell.isLeader"
                      :size="50"
                    />
                    <div class="info_name">
                      {{ cell.truename || cell.nickname }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="19" style="height: 100%">
        <el-card
          shadow="hover"
          :body-style="{
            flex: 1,
            padding: 0,
            'box-sizing': 'border-box',
            overflow: 'hidden',
          }"
          style="height: 100%; display: flex; flex-direction: column"
        >
          <template #header>
            <div class="clearfix d_f j_s a_c">
              <div>
                <span class="mr_m">日报汇总</span>
                <el-date-picker
                  v-model="filterData.createdTime"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="选择日期"
                  size="mini"
                ></el-date-picker>
              </div>
              <el-button-group>
                <el-button
                  size="mini"
                  :loading="searchBtnLoading"
                  type="primary"
                  @click="handleSearch"
                >
                  查询
                </el-button>
                <el-button size="mini" @click="handleReset"> 重置 </el-button>
              </el-button-group>
            </div>
          </template>
          <swiper class="swiper_wrapper">
            <swiper-slide>
              <div class="report_list">
                <div class="report_list_content">
                  <div
                    v-for="(row, k) in pageRightData"
                    :key="k"
                    class="report_cell_box"
                  >
                    <div class="report_cell_title">
                      {{ row.truename || row.nickname }}
                    </div>
                    <div v-if="row.reportCommitList[0]" class="expand_wrapper">
                      <div class="report_cell_title_inner">
                        <span>上个工作日完成</span>
                        <span
                          v-if="
                            row.reportCommitList[0] &&
                            row.reportCommitList[0].lastFinishReportList.length
                          "
                          class="time_text"
                        >
                          {{
                            row.reportCommitList[0].lastFinishReportList[0]
                              .reportTime
                          }}
                        </span>
                      </div>

                      <div
                        v-if="
                          row.reportCommitList[0] &&
                          row.reportCommitList[0].lastFinishReportList.length
                        "
                        class="report_cell_content"
                      >
                        <div
                          v-for="(item, i) in row.reportCommitList[0]
                            .lastFinishReportList"
                          :key="i"
                          class="report_cell_item"
                        >
                          <span class="nowrap">{{ i + 1 }}、</span>
                          <div class="f_1">
                            <span
                              v-for="(cell, j) in item.moduleNamesArr"
                              :key="j"
                            >
                              【{{ cell }}】
                            </span>
                            <span>{{ item.reportText }}</span>
                          </div>
                          <span
                            v-if="Number(item.workProgress)"
                            class="nowrap ml_s"
                          >
                            {{ item.workProgress }}%
                          </span>
                        </div>
                      </div>
                      <div v-else style="color: #999; padding: 10px 20px">
                        无
                      </div>

                      <div class="report_cell_title_inner">
                        <span>今日工作计划</span>
                        <span
                          v-if="
                            row.reportCommitList[0] &&
                            row.reportCommitList[0].todayPlanReportList.length
                          "
                          class="time_text"
                        >
                          {{
                            row.reportCommitList[0].todayPlanReportList[0]
                              .reportTime
                          }}
                        </span>
                      </div>

                      <div
                        v-if="
                          row.reportCommitList[0] &&
                          row.reportCommitList[0].todayPlanReportList.length
                        "
                        class="report_cell_content"
                      >
                        <div
                          v-for="(item, i) in row.reportCommitList[0]
                            .todayPlanReportList"
                          :key="i"
                          class="report_cell_item"
                        >
                          <span class="nowrap">{{ i + 1 }}、</span>
                          <div class="f_1">
                            <span
                              v-for="(cell, j) in item.moduleNamesArr"
                              :key="j"
                            >
                              【{{ cell }}】
                            </span>
                            <span>{{ item.reportText }}</span>
                          </div>
                          <span
                            v-if="Number(item.workProgress)"
                            class="nowrap ml_s"
                          >
                            {{ item.workProgress }}%
                          </span>
                        </div>
                      </div>
                      <div v-else style="color: #999; padding: 10px 20px">
                        无
                      </div>

                      <div class="report_cell_title_inner">备注</div>

                      <div
                        v-if="
                          row.reportCommitList[0] &&
                          row.reportCommitList[0].reportCommitRemark
                        "
                        class="input_remark_box"
                      >
                        {{ row.reportCommitList[0].reportCommitRemark }}
                      </div>
                      <div v-else style="color: #999; padding: 10px 20px">
                        无
                      </div>
                    </div>
                    <div v-else style="color: #999; padding: 10px 20px">
                      今日还未提交
                    </div>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>2222</swiper-slide>
          </swiper>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  reactive,
  ref,
  computed,
  getCurrentInstance,
  onActivated,
  onBeforeUnmount,
} from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { cloneDeep } from "lodash";
import UserAvatar from "../../components/UserAvatar.vue";
import bus from "../../utils/bus";
import SwiperCore, { Thumbs } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
SwiperCore.use([Thumbs]);

const initFilterData = () => {
  return {
    createdTime: null,
  };
};

export default {
  name: "TodayReportManage",
  components: {
    UserAvatar,
    Swiper,
    SwiperSlide,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const $moment = proxy.$moment;
    const $api = proxy.$api;
    const $route = useRoute();
    const store = useStore();

    // 搜索绑定的数据
    const filterData = reactive(initFilterData());
    filterData.createdTime = $moment().format("YYYY-MM-DD");
    // 真正的搜索条件
    const condition = reactive({});
    const searchBtnLoading = ref(false);
    const pageLoading = ref(false);
    const pageData = ref([]);
    const pageRightData = ref([]);

    const userInfo = computed(() => store.state.user.userInfo);

    // 搜索
    const handleSearch = () => {
      Object.keys(filterData).forEach((key) => {
        // 解决后端枚举类型传空字符串解析报错的问题
        condition[key] = filterData[key] === "" ? null : filterData[key];
      });
      getPageData();
    };

    // 获取列表数据
    const getPageData = () => {
      pageLoading.value = true;
      $api.group
        .groupReportTree({
          startCreatedTime: condition.createdTime
            ? condition.createdTime + " 00:00:00"
            : null,
          endCreatedTime: condition.createdTime
            ? condition.createdTime + " 23:59:59"
            : null,
        })
        .then((res) => {
          pageLoading.value = false;
          dealTreeToList(res.data);
        })
        .catch((err) => {
          pageLoading.value = false;
          console.error("getPageData error: ", err);
        });
    };

    const dealTreeToList = (treeData) => {
      const viewData = [];
      let rightData = [];
      const fn = (list) => {
        if (list && Array.isArray(list)) {
          list.forEach((item) => {
            const newObj = cloneDeep(item);
            if (newObj.children) {
              delete newObj.children;
            }
            viewData.push(newObj);
            if (item.userReportCommitList && item.userReportCommitList.length) {
              rightData = rightData.concat(item.userReportCommitList);
            }
          });
          list.forEach((item) => {
            if (item.children) {
              fn(item.children);
            }
          });
        }
      };
      fn(treeData);
      console.log("dealTreeToList ===> viewData", viewData);
      console.log("dealTreeToList ===> rightData", rightData);
      pageData.value = viewData;
      pageRightData.value = rightData;
    };

    const handleReset = () => {
      filterData.createdTime = $moment().format("YYYY-MM-DD");
      handleSearch();
    };

    const thumbsSwiper = ref(null);
    const setThumbsSwiper = (swiper) => {
      thumbsSwiper.value = swiper;
    };

    /**
     * 初始化
     */
    handleSearch();

    bus.on("TodayReportManageHandleSearch", handleSearch);

    onBeforeUnmount(() => {
      bus.off("TodayReportManageHandleSearch", handleSearch);
    });

    onActivated(() => {});

    return {
      filterData,
      searchBtnLoading,
      userInfo,
      pageData,
      pageRightData,
      handleSearch,
      handleReset,
      Thumbs,
      thumbsSwiper,
      setThumbsSwiper,
    };
  },
};
</script>

<style lang="less" scoped>
.person_list {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden auto;
  // padding: 10px 0;
  .person_content {
    width: 100%;
  }
  .cell_box {
    display: flex;
    border-bottom: 1px solid #fff;
  }
  .group_box {
    width: 20px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    word-break: break-all;
    letter-spacing: 0px;
    padding: 20px;
    line-height: 1.4;
    // background-image: linear-gradient(to right top, #ec008c, #6739b6);
    background-color: #c0c4cc;
    color: #fff;
    border-left: none;
    font-weight: 600;
    cursor: pointer;
    &:hover {
      background: #ccc;
    }
  }
  .person_box {
    flex: 1;
    overflow: hidden;
  }
  .person_item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    &:hover {
      background-color: #f2f2f2;
    }
    .info_name {
      margin-left: 20px;
      flex: 1;
    }
  }
}

.clearfix {
  line-height: 28px;
}

.swiper_wrapper {
  height: 100%;
  width: 100%;
}

.report_list {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden auto;
}

.expand_wrapper {
  padding: 10px;
}

.report_cell_title {
  font-size: 16px;
  padding: 10px 20px;
  // background-image: linear-gradient(to right top, #ec008c, #6739b6);
  background-color: #faecd8;
  color: #303133;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .time_text {
    font-size: 14px;
    font-weight: 400;
    color: #999;
  }
}

.report_cell_title_inner {
  font-size: 16px;
  padding: 10px 20px;
  color: #303133;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f2f6fc;
  .time_text {
    font-size: 14px;
    font-weight: 400;
    color: #999;
  }
}

.report_cell_content {
  .report_cell_item {
    padding: 10px 20px;
    padding-right: 40px;
    display: flex;
    line-height: 20px;
    // border-bottom: 1px solid #ebeef5;
    position: relative;
    &:hover {
      background-color: #f2f2f2;
      .delete_btn {
        display: block;
      }
    }
    &:last-child {
      border: 0;
    }
  }
  .delete_btn {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-44%);
    display: none;
    cursor: pointer;
    z-index: 10;
  }
}
.input_remark_box {
  padding: 10px;
}
</style>
